Tengo una pregunta rápida, estoy intentando refactorizar mi código en una base de código existente, esta base de código usa una función de representación, sin embargo, me gustaría reemplazar esto con un componente funcional de reacción en su lugar.
Sin embargo, recibo un error cuando paso un parámetro llamado "resultados de búsqueda", que es una lista.
Aquí está el código anterior no refactorizado
searchResults.sort((a, b) => new Date(b[0].created) - new Date(a[0].created)); const Rows = []; searchResults.forEach((appResults, i) => { Rows.push({ cells: [ appResults[0].applicationId, <>{renderSuccessCount(appResults)}</>, prettifyDate(appResults[0].created) ], isOpen: false });Este es mi código refactorizado
const newRows = []; searchResults.forEach((appResults, i) => { newRows.push({ cells: [ appResults[0].applicationId, <SuccessCount>{appResults}={appResults}</SuccessCount>, prettifyDate(appResults[0].created) ], isOpen: false });Esta es la función SuccessCount (en el código no refactorizado, renderSuccessCount simplemente se renombró a SuccessCount en la versión refactorizada
const SuccessCount = (appResults: AppResult[]) => { const nSuccesses = appResults.filter((result: AppResult) => result.pulseStatus === SUCCESS).length; return Something; };Mi pregunta es relativamente simple, ¿cómo paso appResults a mi componente funcional? Mi código refactorizado actual me da este error.
TS2740: Type '{ children: any[]; }' is missing the following properties from type 'AppResult[]': length, pop, push, concat, and 26 more.Esto está en el linter, ¿cómo me deshago de él?
Ahora que SuccessCount no es una función regular sino un componente funcional de reacción, no recibirá argumentos regulares. Tendrás que acceder a ellos a través de accesorios.
const SuccessCount = ({appResults}: {appResults: AppResult[]}) => {Igual que
const SuccessCount = (props) => { const {appResults} = props; // or const appResults = props.appResults; }Uso como componente funcional
<SuccessCount appResults={appResults} />